<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="/resources/template/template.xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:p="http://primefaces.org/ui"
                xmlns:bi="http://java.sun.com/jsf/composite/bill"
                xmlns:pa="http://java.sun.com/jsf/composite/paymentMethod">

    <ui:define name="content">
        <h:panelGroup >
            <h:form  >
                <p:panel rendered="#{!pettyCashBillController.printPreview}" >
                    <f:facet name="header" >
                        <h:panelGrid columns="14"  >
                            <h:outputLabel value="Petty Bill" />
                            <h:outputLabel value="&nbsp;&nbsp;&nbsp;&nbsp;" style="min-width: 50px;" />
                            <p:selectOneMenu   id="cmbPs" value="#{pettyCashBillController.current.paymentMethod}">                                                                     
                                <f:selectItems value="#{enumController.paymentMethodsWithoutCredit}"  />
                                <p:ajax process="cmbPs" update="creditCard cheque slip" event="change" />
                            </p:selectOneMenu>
                            
                            <p:inputText value="#{pettyCashBillController.comment}" id="comment"/>
                            <p:watermark value="Comment" for="comment"/>

                            <h:panelGroup id="creditCard" style="display: #{pettyCashBillController.current.paymentMethod ne 'Card' ? 'none' : 'block'} ; ">
                                <pa:creditCard paymentMethodData="#{pettyCashBillController.paymentMethodData}"/>
                            </h:panelGroup>

                            <h:panelGroup id="cheque" style="display: #{pettyCashBillController.current.paymentMethod ne 'Cheque' ? 'none' : 'block'} ; " >
                                <pa:cheque paymentMethodData="#{pettyCashBillController.paymentMethodData}"/>
                            </h:panelGroup>

                            <h:panelGroup id="slip" style="display: #{pettyCashBillController.current.paymentMethod ne 'Slip' ? 'none' : 'block'} ;">
                                <pa:slip paymentMethodData="#{pettyCashBillController.paymentMethodData}"/>
                            </h:panelGroup>


                            <p:commandButton  value="Settle" action="#{pettyCashBillController.settleBill()}" ajax="false"  style="width: 150px; padding: 1px;border: 1px solid ; margin: auto;">
                            </p:commandButton>
                            <p:commandButton value="New Bill" ajax="false" action="#{pettyCashBillController.prepareNewBill()}" >
                            </p:commandButton>                            
                        </h:panelGrid>
                    </f:facet>

                    <p:panelGrid columns="2" style="min-width: 100%;">
                        <p:tabView id="tvPt" style="min-height: 250px;"  >
                            <p:ajax event="tabChange"  process="@this" listener="#{pettyCashBillController.onTabChange}" />
                            <p:tab id="tabStaff" title="Staff" >
                                <p:panelGrid columns="1">
                                    <p:autoComplete converter="stfcon"  id="cmbDoc1" 
                                                    value="#{pettyCashBillController.current.staff}" 
                                                    completeMethod="#{staffController.completeStaffWithoutDoctors}" 
                                                    forceSelection="true"
                                                    var="ix" itemLabel="#{ix.person.name}" itemValue="#{ix}" size="30"  style="width: 400px;">
                                        <p:ajax event="itemSelect" process="acPt"/>
                                        <p:column>
                                            #{ix.code}
                                        </p:column>
                                        <p:column>
                                            #{ix.person.nameWithTitle}
                                        </p:column>
                                    </p:autoComplete>


                                </p:panelGrid>
                            </p:tab>

                            <p:tab id="tabSearchPerson" title="Search Person">
                                <p:panelGrid columns="1" >
                                    <p:autoComplete widgetVar="aPt" id="acPt" 
                                                    forceSelection="true"
                                                    value="#{pettyCashBillController.current.person}" 
                                                    completeMethod="#{personController.completePerson}" 
                                                    var="apt" itemLabel="#{apt.name}" converter="personCon"
                                                    itemValue="#{apt}" size="30"  style="width: 400px;">
                                        <p:ajax event="itemSelect" process="acPt" update="panSearch"/>
                                    </p:autoComplete>   

                                    <p:panelGrid id="panSearch" columns="2" >
                                        <h:outputLabel  rendered="#{pettyCashBillController.current.person!=null}" value="Name" />
                                        <h:outputLabel rendered="#{pettyCashBillController.current.person!=null}" value="#{pettyCashBillController.current.person.name}" ></h:outputLabel>
                                        <h:outputLabel  rendered="#{pettyCashBillController.current.person!=null}" value="Sex" />
                                        <h:outputLabel rendered="#{pettyCashBillController.current.person!=null}" value="#{pettyCashBillController.current.person.sex}" ></h:outputLabel>
                                        <h:outputLabel  rendered="#{pettyCashBillController.current.person!=null}" value="Adress" />
                                        <h:outputLabel rendered="#{pettyCashBillController.current.person!=null}" value="#{pettyCashBillController.current.person.address}" ></h:outputLabel>
                                    </p:panelGrid>
                                </p:panelGrid>

                            </p:tab>
                            <p:tab id="tabNew" title="New Person"  >
                                <p:panelGrid columns="2" >
                                    <p:outputLabel value="Title"/>
                                    <p:selectOneMenu  id="cmbTitle" value="#{pettyCashBillController.newPerson.title}"  >
                                        <f:selectItem itemLabel="Select Title"/>
                                        <f:selectItems value="#{pettyCashBillController.title}"/>
                                    </p:selectOneMenu>
                                    <p:outputLabel value="Name"/>
                                    <p:inputText autocomplete="off"  id="txtNewPtName" value="#{pettyCashBillController.newPerson.name}" style="width: 200px;text-transform:capitalize;">
                                    </p:inputText>
                                    <p:outputLabel value="Sex"/>
                                    <p:selectOneMenu id="txtNewSex"  value="#{pettyCashBillController.newPerson.sex}" style="width: 200px;">
                                        <f:selectItem itemLabel="Select Sex"/>
                                        <f:selectItem itemLabel="Male" itemValue="Male"/>
                                        <f:selectItem itemLabel="Female" itemValue="Female"/>
                                        <f:selectItem itemLabel="Unknown" itemValue="Unknown"/>
                                        <f:selectItem itemLabel="Other" itemValue="Other"/>
                                    </p:selectOneMenu>
                                    <p:outputLabel value="Address"/>
                                    <p:autoComplete id="acNewPtArea" converter="areaCon" completeMethod="#{areaController.completeArea}" var="pta" itemLabel="#{pta.name}" itemValue="#{pta}" forceSelection="true" value="#{pettyCashBillController.newPerson.area}" ></p:autoComplete>

                                    <p:outputLabel value="Phone"/>
                                    <p:inputMask mask="999-9999999" id="txtNewPtPhone" autocomplete="off" maxlength="11" value="#{pettyCashBillController.newPerson.phone}">
                                    </p:inputMask>

                                </p:panelGrid>
                            </p:tab>


                        </p:tabView>

                        <p:panelGrid columns="2">
                            <p:outputLabel value="Amount" />
                            <p:inputText autocomplete="off" value="#{pettyCashBillController.current.netTotal}"/>
                            <p:outputLabel value="Petty Cash Voucher No"/>
                            <p:inputText autocomplete="off"  value="#{pettyCashBillController.current.intInvoiceNumber}" />
                            <p:outputLabel value="Description"/>
                            <p:inputTextarea value="#{pettyCashBillController.current.comments}"/>                              
                        </p:panelGrid>

                    </p:panelGrid>
                </p:panel>

                <p:panel rendered="#{pettyCashBillController.printPreview}" >
                    <p:commandButton value="New Bill" ajax="false" action="#{pettyCashBillController.prepareNewBill()}" >
                    </p:commandButton>
                    <bi:petty   bill="#{pettyCashBillController.current}" billController="#{pettyCashBillController}" dup="false"/>
                </p:panel>  

            </h:form>
        </h:panelGroup>

    </ui:define>

</ui:composition>
